B-Design：云时代的企业设计-上篇

①

导言

在这个各行各业都在拥抱云计算，积极地讨论着“行业重构”，“SaaS化”，“建设企业中台”的时代，设计师对B类设计的理解是否还停留在「页面简单，靠表格表单，专注提效，好看没必要」的传统想法？

阿里云作为行业数字化的领导者，应该倡导什么样的设计，助力不同行业快速地云化转型？阿里云企业级产品设计系统B-Design尝试回答这个问题。

②

云计算带来的设计变革

云计算的到来，让整个社会各行各业开始了数字化重构的过程，传统的企业业务产生了革命性的转变。各大企业越来越倾向采购成熟的SaaS化解决方案，而不再自建内部系统。

云化的趋势使企业系统在从基础能力上进行整合，云计算建设生态，企业依附生态深挖垂直领域。

阿里云也在打造自己的企业产品生态，为企业提供一个全方位的数字化工作台。在这样的变革中，产品的边界将被打破，原本以产品/功能维度去定义信息结构的设计方式将被动摇。

1.行业：企业服务逐渐商品化

在过去的几年里，云计算行业里越来越多成熟的技术开始对外商业化。这些原本用于内部员工或者开发者使用的平台，在逐渐由系统转化成商品，并且给客户快速复制交付和使用的过程中，必然面临被评价，被选择。

企业级产品再也不是非用不可，体验的差异也会更直接地摆在客户面前。

2.功能：业务与技术的更深融合

过去，我们普遍认为，云计算是单纯的技术输出，售卖的是云资源和运维工具。然而在帮助越来越多企业进行云化转型的过程中，我们发现不同行业都有着自己的特点与模式，企业级的产品中，业务与技术会越发不可分割。一个好的产品需要懂业务，同时又兼具云技术中台快速开发和定制的能力。

3.用户：业务员与开发者边界的模糊化

在行业拥抱云的同时，云也在拥抱行业。

越来越多低门槛编程，快速搭建页面和流程的工具，让每个企业的用户都可以在自己的系统上进行微创新和改造。建立符合自己场景的小型应用。【平民开发者】的概念近年来在行业内被越来越多人关注。相比传统企业中IT与业务团队截然分开的情况，未来业务员与开发者的边界会逐渐模糊。

技术门槛逐渐降低的同时，设计也慢慢走向普惠，如何帮助越来越多用户、企业、开发者认识设计，理解设计，快速地学习和使用好的设计，让设计和技术一样，走向开源和共建，是我们需要思考的问题。

③

阿里云B-Design，为企业上云而作

未来的企业服务产品，会逐渐转向「搭积木」式的设计模式---底层构建丰富而可解耦的技术能力模块，上层以解决问题的方式组装不同的业务产品。像CRM这样大型的业务系统，不会是越长越大越发冗余，而是可以被拆分成小颗粒的原子能力集，灵活组装成不同体量不同侧重的分子产品。

面对企业全面上云，交付场景千变万化，阿里需要一套完整而灵活的设计系统去组织云上生长出的各种企业级服务。为此，我们搭建了全新的B-Design企业级设计系统，迎接云时代SaaS与行业设计的挑战。

B-Design的以阿里云行业的产品交付经验为基础，对内帮助解决方案交付和业务上云，对外配合云计算的能力输出，赋能合作伙伴与开发者，建设各自的产品。

B-Design倡导 “简单，专业，包容” 的原则，灵活满足不同行业，不同场景，不同品牌的客户诉求。通过鲜明而灵动的视觉风格，来建设云生态下的设计认同。

阿里云企业级设计生态

1.灵活而包容的框架设计

Alla Kholmatova曾在他的书中给出设计系统的不同模式：

“模块化的系统由可交换的和可重复使用的部分组成。它对于需要快速扩展的项目来说非常合适。坏处是想要模块既能一起使用也能分开使用，这一点特别困难。这种系统尤其适合大型产品像是电商类，金融类，和政府网站类。将模块化设计和原子设计一起应用会非常有趣。集成式的系统适用于独特的情境。它由不同的小部分组成，但是不同的小部分不能互换。这种系统适用于重复模块极少和视觉方向频繁变动（作品集，橱窗展示，营销活动）的产品。”

与阿里云控制台不同，B-Design 面向的是云生态下的 SaaS 和多变的行业交付场景，在「一致性」与「包容性」之间，B-Design 找到自己的定位：

B-Design需要是包容，模块化的设计系统：

灵活的，多选择的，相对宽容的设计系统，给具体产品的设计师提供足够自由和发挥的空间。同时提供丰富的场景模块和原子组件，供设计师/开发者快速组装适合自己场景的解决方案。

适配多端的设计模块

2.风格化与品牌强化

一套好的设计系统，需要是开放而演进的，以满足不同客户的差异化定制，B-Design允许客户在我们视觉语言基础上打造符合自己品牌风格的设计。而中小企业，尤其是一部分欠缺设计能力的独立开发者，往往又需要内容完整可以直接使用的设计方案。

阿里云云市场上有数以百计的SaaS产品，这些产品有的是内部孵化，有的是合作伙伴提供。面向这样的场景，B-Design提供热情橙与冷静蓝两种经典配色，为企业建立开箱即用的体验设计方案。无设计能力的中小企业或独立开发者，也可以使用B-Design快速地搭建自己网站。

同时，B-Design提供适应多行业的家族色系统，帮助合作伙伴与客户强化自己的品牌调性，打造一个符合用户自己品牌的配色方案。

B-Design多框架多配色方案

另一方面，在尊重客户自定义颜色和品牌的诉求时，我们陷入了另一个挑战：

允许客户过度开放，是否会丢失掉B-Design的设计内核，变成彻底的工具？如何在帮助客户传递品牌的同时，体现出生态的设计凝聚力，形成阿里云的设计认同？

我们需要用更加鲜明的，风格化的元素去体现自己的特点。

呼吸色

B-Design的呼吸色「Breathing Color」，灵活，流动性强，带入科技与智慧感，在繁忙的数字世界、人机交互过程中，鼓励正念（mindfulness）和交流（communication），也传达其不断的思考性（thinking）。

为了帮助用户快速构建自己的呼吸色体系，我们开发了一个呼吸色工具，自定义调整颜色、动态类型，呼吸频率等。

B-Design呼吸色工具，想要尝鲜了解详情，请关注我们后续的视觉设计详解：）

虚实-毛玻璃

毛玻璃效果在设计领域早已不是什么新鲜事。但是企业类后台系统的设计中，似乎还很少用到。究其原因，大概大部分设计师会认为毛玻璃设计复杂，消耗性能，在B类设计中没有必要。

然而随着技术的发展，性能早已不是瓶颈，我们发现，在企业类产品中，毛玻璃效果除了视觉点缀，传达品牌调性以外，更可以创造一种空间感，呈现介于2D与3D之间的层级。在零售，医疗等贯穿线上线下体验的产品中，尤其可以制造视觉差，帮助到用户理解信息之间的层级关系。

在建立阿里云B类鲜明设计风格的同时，如何将设计系统打磨得更易用，专业和高品质？让设计品质感成为产品的差异化竞争力？阿里云B-Design又在哪些行业和场景中落地实践？如何加入我们，共同建设一个开放的设计生态？

我们会在下一篇详解B-Design的核心设计点和场景实践，敬请期待:）

© 版权说明：文中所有影像数据为样例数据，仅供示意；版权归阿里云设计中心所有，未经授权不得转载。